<template>
    <div class="wholescreen" >
	
	<el-row :gutter="20">
     <el-col :span="4"  >
         <el-card class="box-card" style="height:500px">
             <el-row :gutter="10">
                
                <el-col :span="24"  >
                  <EditFlowPalette  :componentUis="ComponentUis">

                  </EditFlowPalette>
     		    </el-col>
			</el-row>
			
          </el-card>
     </el-col>

     <el-col :span="20"  >
	    <el-row >
		   <el-col :span="24"  >
		    <el-button type="primary" @click="RunFlow">Run</el-button>
		   </el-col>
		   <el-col :span="24"  >
            <Diagram  :flowId="flowId"  @selectComponent="selectFlowStep"></Diagram>
		   </el-col>
		</el-row>
     </el-col>
    </el-row>
	
	
	<el-dialog :title="showComponentTitle" v-model="isShowComponentProprtySheet" >
	    <ComponentPropertySheet :componentId="showComponentId" :projectVersionId="projectVersionId">
		</ComponentPropertySheet>
    </el-dialog>
	
	</div>
</template>
<script>
    import {Flow} from '../apis/flow.js';
    import {DefinitionPlusUIFactory} from '../apis/DefinitionPlusUIFactory.js';
    import Vue from 'vue';
    import {Col,Row ,Card ,Dialog,Button} from 'element-ui'
	Vue.component(Col.name, Col)
	Vue.component(Row.name, Row)
	Vue.component(Card.name, Card)
	Vue.component(Dialog.name, Dialog)
	Vue.component(Button.name, Button)
	import 'element-ui/lib/theme-default/button.css';
	import 'element-ui/lib/theme-default/row.css';
	import 'element-ui/lib/theme-default/col.css';
	import 'element-ui/lib/theme-default/card.css';
	import 'element-ui/lib/theme-default/dialog.css';
	
    import EditFlowPalette from './EditFlowPalette.vue'
	import Diagram from './Diagram.vue'
	import ComponentPropertySheet from './ComponentPropertySheet.vue'
	
	
	
    export default {
        data(){
            return {
				  ComponentUis:[],
				  isShowComponentProprtySheet:false,
				  showComponentId:null,
				  showComponentTitle:"",
				  projectVersionId :null
            }
        },
		props:['flowId'], //声明props
        components:{EditFlowPalette,Diagram,ComponentPropertySheet},
        mounted() {
		
            var me =this ;
            DefinitionPlusUIFactory.FindAllComponentUis().then(
                uis =>{
					me.ComponentUis=uis
				}
            );
              
        },
		
        computed:{

        },
        methods:{
           selectFlowStep(node){
			  this.showComponentId =node.componentId
			  this.isShowComponentProprtySheet=true
			  this.showComponentTitle =node.componentName
			  this.projectVersionId = node.projectVersionId
		   },
		   RunFlow(){
			    Flow.RunFlow(this.flowId).then(result=>{
					console.log(result)
				});
		   }
        }
		
    }
</script>
<style>
.wholescreen{
  width:95%;
}
</style>